<template>
  <list-layout
    channel="industryeval">
    <div class="list-top-text">
      全部在线评测
      <filter-options ref="filterOptions" class="filter-options"
        :hasKw="true"
        :bottomKw="true"
        :opts="filterOptions"
        :showSelected="false"
        :maxLines="3"
        @search="filter({query: $event})"></filter-options>
    </div>
    <list-item
      v-for="(item,index) in data.docs" :key="index"
      :tags="[item.类型, item.领域,
        `查看${item.views || 0}次`,
        item.downloads ? `下载${item.downloads || 0}次` : undefined,
        item.callbacks ? `回调${item.callbacks || 0}次` : undefined,
        item.applications ? `申请${item.applications || 0}次` : undefined]"
      :date="item.日期"
      :title="item.名称"
      :content="item.详情 || item.名称"
      :url="`/test/industryeval/${item.id}`"></list-item>

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { GoHomeOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
import listItem from '../../components/listItem.vue';
import pagination from '../../components/pagination.vue';
import FilterOptions from '../../components/filterOptions.vue';

export default {
  name: 'IndustryEvalList',
  mixins: [mixins.ObjectDataMixin, GoHomeOnLocaleChange],
  components: {
    listItem,
    listLayout,
    pagination,
    FilterOptions,
  },
  data() {
    return {
      filters: {},
      filterOptions: [
        {
          label: '类型',
          field: '类型',
          multiple: false,
          options: [
            {
              label: '智能产品',
              value: '智能产品',
            },
            {
              label: '核心基础',
              value: '核心基础',
            },
            {
              label: '智能助理能力等级评估',
              value: '智能助理能力等级评估',
            },
            {
              label: '支撑系统',
              value: '支撑系统',
            },
            {
              label: '其他',
              value: '其他',
            },
          ],
        },
      ],
      currentCategory: '',
    };
  },
  created() {
    if (this.Bus && this.Bus.$store && this.Bus.$store.state
      && this.Bus.$store.state.portal && this.Bus.$store.state.portal.filters
      && this.Bus.$store.state.portal.filters.industryeval) {
      this.currentCategory = this.Bus.$store.state.portal.filters.industryeval.filter || {};

      this.refreshData({ ...this.currentCategory });
    } else {
      this.refreshData();
    }
  },
  methods: {
    afterRefresh() {
      this.Bus.$store.commit('portal/CLEAR_FILTERS');
    },
    categoryChanged(f) {
      this.currentCategory = f;

      this.refreshData(f);

      this.filters = {};
      this.$refs.filterOptions.clearFilters();
    },
    pageChanged(p) {
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter, page: p });
    },
    filter(filters) {
      const { query } = filters;

      this.filters = query || {};
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter });
    },
  },
};
</script>
